﻿
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2> 添加房型信息</h2>

@* <table class="layui-table">
    <tr>
        <td>序号</td>
        <td>房型名称</td>
        <td></td>
    </tr>
</table> *@

<table class="layui-table">
    <tr>
        <td>房型名称</td>
        <td> <input type="text" id="name" value="" /> </td>
    </tr>
    <tr>
        <td>房型图片</td>
        <td>
            <input type="type" id="imgUrl" value="" hidden  /> 
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                    <i class="layui-icon layui-icon-upload"></i> 房型图片上传
                </button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                    预览图：
                    <div class="layui-upload-list" id="upload-demo-preview"></div>
                </blockquote>
            </div>

        </td>
    </tr>

    <tr>
        <td></td>
        <td>

            <input type="button" id="btnAdd" class="layui-btn layui-bg-blue" value="添加" onclick="Add()" />

        </td>
    </tr>

</table>

<script>

    $(function () {
        TPSC();
    });

    function TPSC() {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            url: '/Home/Upload', // 实际使用时改成您自己的上传接口即可。
            multiple: true,
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                });
            },
            done: function (res) {
                // 上传完毕
                // …
                $("#imgUrl").val(res.imgUrl);  //上传完毕之后,给图片文本框赋值
            }
        });
    }
            // {
            // "id": 0,
            // "name": "string",
            // "imgUrl": "string"
            // }
    function Add() {
        var name = $("#name").val();
        var imgUrl = $("#imgUrl").val();
        var model = {
            "id": 0,
            "name": name,
            "imgUrl": imgUrl
        }

        $.ajax({
            url: 'https://localhost:7061/api/RoomType/Add',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify(model),
            dataType: 'json',
            success: function (res){
            
                if (res > 0) {
                    alert("添加成功");
                    location.href = '/RoomType/Index';
                } else { 
                    alert("添加失败");

                }
            }
        });

    }
</script>